const arrow = `<svg aria-hidden = "true"
                focusable = "false"
                data-prefix = "fas"
                data-icon = "chevron-right"
                class="svg-inline--fa fa-chevron-right fa-w-10 fa-sm "
                role = "img"
                xmlns = "http://www.w3.org/2000/svg"
                viewBox = "0 0 320 512" > <path fill = "currentColor"
                d = "M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z" > </path></svg >`

function getTemplate(name) {
  return `<div class="top-nav">
            <div class="logo-wrap">
                <div class="l-logo mobile_hide"><img src="./img/logo.png" /><span class="logo-name">Libra3D</span></div>
                <div class="l-logo pc_hide"><img src="./img/logo.png" /><span class="logo-name">Libra3D</span></div>
                <div class="r-item mobile_hide">
                    <a class="nav-name ${name=='index'?'active':''}" href="./index.html">首页</a>
                    <a class="nav-name ${name=='detail'?'active':''}" href="./detail.html">详情</a>
                    <a class="nav-name ${name=='about'?'active':''}" href="./about.html">关于 <span class="iconfont iconjiantouarrow483"></span></a>
                </div>
                <button
                  aria-controls="header-menu"
                  aria-expanded="false"
                  aria-label="Toggle menu"
                  class="header__HamburgerButton-sc-u238hu-11 csvEcC">
                    <div class="crown"></div>
                    <div class="meat">
                    </div><div class="heel">
                    </div>
                </button>
            </div>
        </div>

        <div id="header-menu" class="hide header__MobileMenuContainer-sc-u238hu-12 MZROn">
            <ul>
                <li>
                  <a href="./index.html">主页</a>
                  ${arrow}
                </li>

                <li>
                  <a href="./detail.html">详情</a>
                  ${arrow}
                </li>

                <li>
                  <a href="./about.html">关于</a>
                  ${arrow}
                </li>
            </ul>
        </div>`
}

class ComponentTemplate extends HTMLElement {
  constructor(a) {
    super();
    const name = this.getAttribute('name')

    var container = document.createElement('div');
    container.classList.add('content');
    container.innerHTML = getTemplate(name);
    this.append(container);
  }
}
window.customElements.define('header-component', ComponentTemplate);

const menu = document.querySelector("#header-menu");
const menuBtn = document.querySelector("button");

let flag = false;
menuBtn.addEventListener("click", () => {
  flag = !flag;
  if (flag) {
    menu.classList.remove("hide");
    menu.classList.add("show");
    menuBtn.ariaExpanded = "true"

  } else {
    menu.classList.remove("show");
    menu.classList.add("hide");
    menuBtn.ariaExpanded = "false"

  }
});
